<link rel="stylesheet" href="assets/store/css/goods.css?v=<?= $version ?>">
<link rel="stylesheet" href="assets/common/plugins/umeditor/themes/default/css/umeditor.css">
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <form id="my-form" class="am-form tpl-form-line-form" method="post">
                    <div class="widget-body">
                        <fieldset>
                            <div class="widget-head am-cf">
                                <div class="widget-title am-fl">基本信息</div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require"> 所属课程 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <select name="part[c_id]"
                                            data-am-selected="{searchBox: 1, btnSize: 'sm', placeholder:'请选择', maxHeight: 400}"
                                            required>
                                        <option value=""></option>
                                        <?php if (isset($video) && !$video->isEmpty()):
                                            foreach ($video as $item): ?>
                                                <option value="<?= $item['id'] ?>"><?= $item['name'] ?></option>
                                            <?php endforeach; endif; ?>
                                    </select>
                                    <div class="help-block">
                                        <small></small>
                                    </div>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">章节图片 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <div class="am-form-file">
                                        <div class="am-form-file">
                                            <button type="button"
                                                    class="upload-file am-btn am-btn-secondary am-radius">
                                                <i class="am-icon-cloud-upload"></i> 选择图片
                                            </button>
                                            <div class="uploader-list am-cf">
                                            </div>
                                        </div>
                                        <div class="help-block am-margin-top-sm">
                                            <small>尺寸750x750像素以上，大小2M以下 (可拖拽图片调整显示顺序 )</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">章节标题 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="part[name]"
                                           value="" required>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">播放时长 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="text" class="tpl-form-input" name="part[times]"
                                           value="" placeholder="播放时长 01:22:40" required>
                                    <small></small>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">上传视频 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <div class="am-form-file">
                                        <div class="am-form-file">
                                            <label for="video">
                                                <button type="button"
                                                        class="am-btn am-btn-secondary am-radius">
                                                    <i class="am-icon-cloud-upload"></i> 选择视频
                                                </button>
                                                <input type="file" hidden id="video" class="upload-video " accept="video/*">
                                            </label>

                                            <div class="uploader-list am-cf">
                                                <video src="" id="video_url" controls style="width: 100%"></video>
                                                <input type="hidden" name="part[url]">
                                            </div>
                                        </div>
                                        <div class="help-block am-margin-top-sm">
                                            <small>视频最大20M</small>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="am-form-group">
                                <label class="am-u-sm-3 am-u-lg-2 am-form-label form-require">章节排序 </label>
                                <div class="am-u-sm-9 am-u-end">
                                    <input type="number" class="tpl-form-input" name="part[sort]"
                                           value="100" required>
                                    <small>数字越小越靠前</small>
                                </div>
                            </div>

                            <!-- 表单提交按钮 -->
                            <div class="am-form-group">
                                <div class="am-u-sm-9 am-u-sm-push-3 am-margin-top-lg">
                                    <button type="submit" class="j-submit am-btn am-btn-secondary">提交
                                    </button>
                                </div>
                            </div>

                        </fieldset>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- 图片文件列表模板 -->
{{include file="layouts/_template/tpl_file_item" /}}

<!-- 文件库弹窗 -->
{{include file="layouts/_template/file_library" /}}

<!-- 图片文件列表模板 -->
<script id="tpl-user-item" type="text/template">
    {{ each $data }}
    <div class="file-item">
        <a href="{{ $value.avatarUrl }}" title="{{ $value.nickName }} (ID:{{ $value.user_id }})" target="_blank">
            <img src="{{ $value.avatarUrl }}">
        </a>
        <input type="hidden" name="goods[coach_id]" value="{{ $value.coach_id }}">
    </div>
    {{ /each }}
</script>

<script src="assets/common/js/vue.min.js"></script>
<script src="assets/common/js/ddsort.js"></script>
<script src="assets/common/plugins/umeditor/umeditor.config.js?v=<?= $version ?>"></script>
<script src="assets/common/plugins/umeditor/umeditor.min.js"></script>
<script src="assets/store/js/goods.spec.js?v=<?= $version ?>"></script>
<script src="assets/store/js/select.data.js?v=<?= $version ?>"></script>
<script>

    $(function () {
        // 富文本编辑器
        UM.getEditor('container', {
            initialFrameWidth: 375 + 15,
            initialFrameHeight: 300
        });

        // 选择图片
        $('.upload-file').selectImages({
            name: 'part[image]'
        });
        $(".upload-video").change(function () {
            let that = $(this);
            var formData = new FormData();
            formData.append("iFile", that[0].files[0]);
            // 上传设置
            loadingIndex = layer.load(2, { //icon支持传入0-2
                shade: [0.5, 'gray'], //0.5透明度的灰色背景
                content: '加载中...',
                success: function (layero) {
                    layero.find('.layui-layer-content').css({
                        'padding-top': '39px',
                        'width': '60px'
                    });
                }
            });
            $.ajax({
                // 规定把请求发送到那个URL
                url: STORE_URL + "/Upload/video",
                type: "post",            // 请求方式
                dtaType: 'json',
                data: formData,//传值就传fd对象了
                processData:false,  //告诉jQuery不要处理数据
                contentType: false,  //告诉jQuery不要设置contentType
                // 请求成功时执行的回调函数
                success: function (data) {
                    layer.close(loadingIndex)
                    if (data.code == 0){
                        layer.msg(data.msg)
                    }else {
                        $("input[name='part[url]']").val(data.data.file_id)
                        $("#video_url").attr('src',data.data.file_path)

                        var audio = new Audio(data.data.file_path)
                        // 元数据已加载
                        audio.addEventListener("loadedmetadata", function (e) {
                            let duration = audio.duration;
                            console.log(duration)
                            //http://mod30215test.iseo365.com/uploads/video/20230406173102df1459457.mp4
                            var hour = Math.floor(duration/(24*60*60));
                            var min = Math.floor(duration%(24*60*60)/60);
                            var sec = Math.floor(duration%(24*60*60)%60);
                            hour = hour === 0 ? '00':hour
                            min = min === 0 ? '00':min
                            sec = sec === 0 ? '00':sec
                            $("input[name='part[times]']").val(hour+':'+min+':'+sec)
                        });
                        return false
                    }
                }
            });
        })

        // 图片列表拖动
        $('.uploader-list').DDSort({
            target: '.file-item',
            delay: 100, // 延时处理，默认为 50 ms，防止手抖点击 A 链接无效
            floatStyle: {
                'border': '1px solid #ccc',
                'background-color': '#fff'
            }
        });

        // 注册商品多规格组件
        var specMany = new GoodsSpec({
            el: '#many-app'
        });

        /**
         * 表单验证提交
         * @type {*}
         */
        $('#my-form').superForm({
            // 获取多规格sku数据
            buildData: function () {
                var specData = specMany.appVue.getData();
                return {
                    goods: {
                        spec_many: {
                            spec_attr: specData.spec_attr,
                            spec_list: specData.spec_list
                        }
                    }
                };
            },
            // 自定义验证
            validation: function () {
                var specType = $('input:radio[name="goods[spec_type]"]:checked').val();
                if (specType === '20') {
                    var isEmpty = specMany.appVue.isEmptySkuList();
                    isEmpty === true && layer.msg('商品规格不能为空');
                    return !isEmpty;
                }
                return true;
            }
        });
    });
</script>
